<script setup>

import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);

let getList = () => {
    axios({
        method: "GET",
        url: `/api/salaryLevel/getSalaryLevel`
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const submitData = () => {
    axios({
        method: "PATCH",
        url:"/api/salaryLevel/update",
        data: viewData.value
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

const tableEdit = (row, column, cell, event) => {
    console.log(row, column, cell, event);
    event.target.innerHTML = "";
    let cellInput = document.createElement("input");
    cellInput.value = row[column.property];
    cellInput.setAttribute("type", "text");
    cellInput.style.width = "60%";
    cellInput.style.marginLeft = "10px";
    cellInput.style.paddingLeft = "5px";
    cell.appendChild(cellInput);
    //   聚焦
    cellInput.focus();
    //失焦事件
    cellInput.onblur = function () {
        cell.removeChild(cellInput);
        event.target.innerHTML = cellInput.value;
        row[column.property] = cellInput.value;
    };
};

onMounted(() => {
    getList();
});
</script>

<template>
    <div>
        <h3>工资等级划分表</h3>
        <main>
            <el-table :data="viewData" @cell-dblclick="tableEdit">
                <el-table-column prop="level" label="等级"></el-table-column>
                <el-table-column prop="gear1" label="1档"></el-table-column>
                <el-table-column prop="gear2" label="2档"></el-table-column>
                <el-table-column prop="gear3" label="3档"></el-table-column>
                <el-table-column prop="gear4" label="4档"></el-table-column>
                <el-table-column prop="gear5" label="5档"></el-table-column>
                <el-table-column prop="gear6" label="6档"></el-table-column>
                <el-table-column prop="gear7" label="7档"></el-table-column>
                <el-table-column prop="gear8" label="8档"></el-table-column>
                <el-table-column prop="gear9" label="9档"></el-table-column>
                <el-table-column prop="gear10" label="10档"></el-table-column>
            </el-table>
        </main>
        <el-button class="updateButton" type="warning" round @click="submitData">提交修改</el-button>

    </div>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}
</style>